<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
let map;
var points = [
  { weight: 8, lnglat:['122.083218','37.534356'],name:'主楼'},
  { weight: 8, lnglat:['122.082875','37.530085']},
  { weight: 8, lnglat:['122.080043','37.530918']},
  { weight: 8, lnglat:['122.084935','37.529948']},
  { weight: 1, lnglat: ['122.082725','37.526834']},
  { weight: 1, lnglat: ['122.084012','37.528451']},
  { weight: 8, lnglat:["116.408032","39.909729"], "name": '北京'},
  { weight: 8, lnglat:["121.461743","31.231584"], "name": '上海'},
  { weight: 8, lnglat:["113.265942","23.08983"], "name": '广州'},
  { weight: 8, lnglat:["104.059399","30.562253"], "name": '成都'},
  { weight: 1, lnglat: ["108.939621", "34.343147"] },
  { weight: 1, lnglat: ["112.985037", "23.15046"] },
]
export default {
  name: "centralMap",
  data() {
    return {

    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "cadc649a74f885ed9a13c9af09ef28b4",              // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['AMap.Scale', 'AMap.ToolBar', 'AMap.DistrictSearch', 'AMap.Object3DLayer', 'AMap.Weather', "AMap.MarkerCluster"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {             // 是否加载 AMapUI，缺省不加载
          "version": '1.1',   // AMapUI 缺省 1.1
          "plugins": [],       // 需要加载的 AMapUI ui插件
        },
        // "Loca": {                // 是否加载 Loca， 缺省不加载
        //   "version": '1.3.2'  // Loca 版本，缺省 1.3.2
        // },
      }).then((AMap) => {
        map = new AMap.Map(document.getElementById("container"), {
          zoom: 12,  //设置地图显示的缩放级别
          center: [122.083117, 37.534363],//设置地图中心点坐标
          /*layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组*/
          mapStyle: 'amap://styles/grey',  //设置地图的显示样式
          viewMode: '2D',  //设置地图模式
          lang: 'zh_cn',  //设置地图语言类型
        });
        const opts = {
          subdistrict: 1,
          extensions: 'all',
          level: 'city'
        };
        //利用行政区查询获取边界构建mask路径
        //也可以直接通过经纬度构建mask路径
        const district = new AMap.DistrictSearch(opts);
        district.search('威海市', function (status, result) {
          let i;
          const bounds = result.districtList[0].boundaries;
          const mask = [];
          for (i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]])
          }
          //添加描边
          for (i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              path: bounds[i],
              strokeColor: '#3078AC',
              strokeWeight: 3,
              map: map
            })
          }
        });
        var count = points.length;

        var _renderClusterMarker = function (context) {
          // 聚合中点个数
          var clusterCount = context.count;
          var div = document.createElement('div');
          // 聚合点配色
          var defaultColor = [
            '204,235,197',
            '168,221,181',
            '123,204,196',
            '78,179,211',
            '43,140,190',
          ]
          var bgColor;
          if(clusterCount >= 0 && clusterCount < 10) {
            bgColor = defaultColor[0];
          } else if(clusterCount >= 10 && clusterCount < 100){
            bgColor = defaultColor[1];
          } else if(clusterCount >= 100 && clusterCount < 1000) {
            bgColor = defaultColor[2];
          } else if(clusterCount >= 1000 && clusterCount < 10000) {
            bgColor = defaultColor[3];
          } else if(clusterCount >= 10000) {
            bgColor = defaultColor[4];
          }
          div.style.backgroundColor = 'rgba(' + bgColor + ',.5)';
          var size = Math.round(25 + Math.pow(clusterCount/count, 1 / 5) * 40);
          div.style.width = div.style.height = size + 'px';
          div.style.border = 'solid 1px rgba(' + bgColor + ',1)';
          div.style.borderRadius = size / 2 + 'px';
          div.innerHTML = context.count
          div.style.lineHeight = size + 'px';
          div.style.color = '#ffffff';
          div.style.fontSize = '12px';
          div.style.textAlign = 'center';
          context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
          context.marker.setContent(div);
          context.marker.on('click', function(e) {
            var curZoom = map.getZoom();
            if(curZoom < 20){
              curZoom += 1;
            }
            map.setZoomAndCenter(curZoom, e.lnglat);
          });
        };
        var _renderMarker = function(context) {
          var content = '<div style="background-color: rgba(255,255,178,.9); height: 18px; width: 18px; border: 1px solid rgba(255,255,178,1); border-radius: 12px; box-shadow: rgb(250,247,247) 0px 0px 3px;"></div>';
          var offset = new AMap.Pixel(-9, -9);
          context.marker.setContent(content)
          context.marker.setOffset(offset)
          context.marker.on('click',function (){
            console.log(context)
            infoWindow.open(map, context.marker.getPosition());
          })
          //实例化信息窗体
          var title = '<span style="font-size:11px;color:#faf8f8;">水肥一体控制机：运行中</span>',
              content = [];
          var infoWindow = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(16, 100)
          });

//构建自定义信息窗体
          function createInfoWindow(title, content) {
            var info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";
            //可以通过下面的方式修改自定义窗体的宽高
            info.style.width = "400px";
            // 定义顶部标题
            var top = document.createElement("div");
            var titleD = document.createElement("div");
            var closeX = document.createElement("img");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.src = "https://webapi.amap.com/images/close2.gif";
            closeX.onclick = closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            var middle = document.createElement("div");
            middle.className = "info-middle";
            middle.style.backgroundColor = 'white';
            middle.innerHTML = content;
            info.appendChild(middle);

            // 定义底部内容
            var bottom = document.createElement("div");
            bottom.className = "info-bottom";
            bottom.style.position = 'relative';
            bottom.style.top = '0px';
            bottom.style.margin = '0 auto';
            var sharp = document.createElement("img");
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
          }
            //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        var cluster = new AMap.MarkerCluster(map, points, {
          gridSize: 60, // 聚合网格像素大小
          renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
          renderMarker: _renderMarker,   // 自定义非聚合点样式
        });
      }).catch(e => {
        console.log(e);
      })
    },
  }
}

</script>

<style scoped>
#container {
  width: 900px;
  height: 540px;
}
</style>